@import "./mixins/mixin.scss";

@include b(messageA) {
    box-sizing: border-box;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    min-height: 28px;
    background-color: red;
    z-index: 999;
    line-height: 1.125;
    font-size: var(--text-size-small);
    display: flex;
    color: #000000d9;
    padding:  var( --space-size-default);
    background: #fff;
    border-radius: var(--border-radius-size-medium);
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
    pointer-events: all;
    transition: all 0.4s, transform 0.4s;

    @include m(primary) {
        color: #fff;
        background: var(--color-primary);
    }

    @include m(success) {
        color: #fff;
        background: var(--color-success);
    }

    @include m(warning) {
        color: #fff;
        background: var(--color-warning);
    }

    @include m(error) {
        color: #fff;
        background: var(--color-error);
    }

    @include m(danger) {
        color: #fff;
        background: var(--color-danger);
    }

    @include m(info) {
        color: #fff;
        background: var(--color-info);
    }

    @include when(center) {
   
        justify-content: center;
    }
}


.m-messageA-fade-enter-from,
.m-messageA-fade-leave-to {
    opacity: 0;
    transform: translate(-50%, -100%);

}